<template>
	<!-- 企业详情 -->
	<scroll-view :scroll-y="true" :class="pageClass" :style="pageStyle" v-if="pageReady">
		<moxi-nav :set="navSet"></moxi-nav>

		<view class="top-img" :style="{top:navHeight+'px'}">
			<img style="width: 100%;height: 100%;object-fit: cover;" :src="infoData.img" mode="aspectFit">
		</view>
		<view style="position: fixed;left: 0;top: 0;overflow-y: auto;height: 100%;width: 100%;">
			<view class="box-con" :style="{'margin-top': (navHeight+140)+'px'}"
				>
				<view class="nav">
					<view class="container">
						<view class="info">
							<view class="top" style="justify-content: space-between;">
								<view class="left">
									<img :src="infoData.logo" style="max-width: 100%;max-height: 100%;">
								</view>
								<u-rate :count="count" v-model="infoData.rate/2" allowHalf :readonly="true" :minCount="0"
									:activeColor="app_color" style="margin-top: -10px;"></u-rate>
							</view>
							
							<view class="middle" style="margin-top: 20px;">
								<view class="right" style="margin-bottom: 10px;font-size: 18px;">{{infoData.name}}</view>
								<view class="text" style="font-size: 12px;color: #666;" v-if="infoData.operate">{{infoData.operate}}</view>
								
							</view>
				<view v-if="infoData.type_info&&infoData.type_info.type==2&&infoData.tag&&infoData.tag.length" class="bottom" 
				style="display: flex;justify-content: space-between;">
					<view style="display: flex;align-items: baseline;">
						<view   style="display: flex;flex-direction: row;
						white-space: nowrap;text-overflow:ellipsis;overflow:hidden;" >
								<text class="type-tag" 
								v-for="(t,k) in infoData.tag" v-if="k<3">{{t}}</text>
							</view>
					</view>
				</view>
				<view v-if="infoData.type_info&&infoData.type_info.type==2&&infoData.check_tag&&infoData.check_tag.length" class="bottom" style="display: flex;justify-content: space-between;">
					<view style="display: flex;align-items: baseline;">
						<view   style="display: flex;flex-direction: row;
						white-space: nowrap;text-overflow:ellipsis;overflow:hidden;">
								<text class="type-tag" style="background-color: antiquewhite;" 
								v-for="(t,k) in infoData.check_tag" v-if="k<3">{{t}}</text>
							</view>
					</view>
				</view>

					<view v-if="infoData.faren" class="bottom" style="display: flex;justify-content: space-between;">
						<view style="display: flex;align-items: baseline;">
							<text class="lt">法人代表：</text>
							<text style="margin-left: 4px;font-size: 13px;">{{infoData.faren}}</text>
						</view>
					</view>
					
					<view v-if="infoData.ziben" class="bottom" style="display: flex;justify-content: space-between;" >
						<view style="display: flex;align-items: baseline;">
							<text class="lt">注册资金：</text>
							<text style="margin-left: 4px;font-size: 13px;">{{infoData.ziben}}</text>
						</view>
					</view>
					
					<view v-if="infoData.time" class="bottom" style="display: flex;justify-content: space-between;" @click="openinfo('tel')">
						<view style="display: flex;align-items: baseline;">
							<text class="lt">注册时间：</text>
							<text style="margin-left: 4px;font-size: 13px;">{{$u.timeFormat(infoData.time, 'yyyy年mm月dd日')}}
							</text>
						</view>
					</view>
					<view class="website" style="display: flex;align-items: baseline;margin-top: 6px;"
						v-if="infoData.url" @click="goUrl(infoData.url)">
						<text class="lt">官网地址：</text>
						 <text
							style="margin-left: 4px;font-size: 13px;">{{infoData.url}}</text>
					</view>
					
					<view class="bottom" v-if="infoData.tel" style="display: flex;justify-content: space-between;"
					 @click="openinfo('tel')">
						<view style="display: flex;align-items: baseline;font-size: 12px;">
						<text class="lt">联系方式：</text>
							<text style="margin-left: 4px;">{{infoData.tel}}</text>
						</view>
					</view>
					<view class="bottom" style="display: flex;justify-content: space-between;"
					 @click="openinfo('address')">
						<view style="display: flex;align-items: baseline;font-size: 12px;">
							<text class="lt" >注册地址：</text>
							<text style="margin-left: 4px;flex: 1;">{{infoData.address}}</text>
						</view>
					</view>
						</view>
					</view> 
				</view>
				<view style="width: 100%;height: 5px;background-color: #f6f5f9;"></view>
			<!-- #ifdef MP-WEIXIN --> 
			<view style="position: relative;">
				<view v-show="infoData.type_info&&infoData.type_info.map==1" class="map" :style="appType!='baidu'?'height: 120px;z-index:0':''">
					<map  :style="appType!='baidu'?'width: 100%;height: 120px;':'width: 100%;'" :latitude="infoData.la ? infoData.la : latitude"
						:longitude="infoData.ln ? infoData.ln : longitude" :markers="covers">
					</map>
				</view>
			</view>
				<!-- #endif -->
			
				<view style="width: 100%;height: 5px;background-color: #f6f5f9;"></view>
			
				<view>
					<u-tabs :inactiveStyle="{fontWeight:600}" :activeStyle="{fontWeight:600}" :list="list1" :lineColor="app_color" lineWidth="40"  @click="chooseTab"></u-tabs>
				</view>
			
				<view class="goBack" @click="goBack()">
					<u-icon name="arrow-leftward" color="#000" size="16"></u-icon>
				</view>
				<view style="width: 100%;height: 5px;background-color: #f6f5f9;"></view>
				<view class="tabsMsg">
					<view class="introduce" v-if="tabsName == '详情介绍'">
						<view style="display: flex;flex-direction: column;margin-bottom: 10px;" v-if="infoData.type_info&&infoData.type_info.table_style==1">
							<view class="box-con2" style="background-color: #f4f4f4;color: #9d9d9d;">
								公司名称
							</view>
							<view class="box-con2">
								{{infoData.name}}
							</view>
							<view class="box-list" style="">
								<view class="box-title">
									法人代表：
								</view>
								<view class="box-con2">
									{{infoData.faren}}
								</view>
							</view>
							<view class="box-list" style="">
								<view class="box-title">
									注册资本：
								</view>
								<view class="box-con2">
									{{infoData.ziben}}
								</view>
							</view>
							<view class="box-list" style="">
								<view class="box-title">
									成立时间：
								</view>
								<view class="box-con2">
									<text v-if="infoData.time&&infoData.time>0">
									{{$u.timeFormat(infoData.time, 'yyyy年mm月dd日')}}
									</text>
								</view>
							</view>
							<view class="box-list" style="">
								<view class="box-title">
									联系电话：
								</view>
								<view class="box-con2" @click="openinfo('tel')">
									{{infoData.tel}}
								</view>
							</view>
							<view class="box-list" style="">
								<view class="box-title">
									网站：
								</view>
								<view class="box-con2" @click="goUrl(infoData.url)">
									{{infoData.url}}
								</view>
							</view>
							<view class="box-list" style="">
								<view class="box-title">
									详细地址：
								</view>
								<view class="box-con2">
									{{infoData.address}}
								</view>
							</view>
						</view>
						<u-parse :content="content" ></u-parse>
					</view>
					<view class="recommends" v-if="tabsName == '产品服务'">
						<view class="box" v-for="(item, index) in infoData.product" :key="index"
							@click="goProductDetail(item.id)">
							<view class="top">
								<img :src="item.img">
								<view class="title">{{item.title}}</view>
							</view>
						</view>
						<view class="null" v-if="infoData.product&&infoData.product.length == 0">暂无相关数据</view>
					</view>
					<view class="contact" v-if="tabsName == '联系方式'" style="width: 100%;">
						<view class="box" >
							<u-parse :content="infoData.lianxi" v-if="infoData.lianxi.length"></u-parse>
								<view class="null" v-else>暂无联系方式</view>
					
						</view>
					</view>
					<view class="contact" v-if="infoData.type_info&&tabsName == infoData.type_info.agent_name" 
					style="width: 100%;">
						<view class="box">
							<view class="daili_list" style="" v-for="list in daili">
								<view style="display: flex;flex-direction: row;justify-content: space-between;">
									<text style="">{{list.company}}</text>
									<view @click="tel(list.tel)">
										<u-icon name="phone-fill" size="32" :color="app_color"></u-icon>
									</view>
								</view>
								<view style="display: flex;flex-direction: row;margin: 6px 0;">
									<u-icon name="account-fill"></u-icon>
									<text style="font-size: 14px;;">{{list.name}} - {{list.tel}}</text>
								</view>
								<view style="display: flex;flex-direction: row;" @click="toAddress(list)">
									<u-icon name="map-fill"></u-icon>
									<text class="u-line-1" style="font-size: 14px;color: #666">{{list.address}}</text>
								</view>
							</view>
							<view class="null" v-if="daili.length==0">暂无相关数据</view>
						</view>
					</view>
					<view class="albums" v-if="tabsIndex == 3"
						:style="{padding: infoData.img_list&&infoData.img_list.length != 0 ? '10px' : '10px 0 0'}">
						<view class="box" v-for="(item, index) in infoData.img_list" :key="index"
							v-if="infoData.img_list&&infoData.img_list.length != 0" @click="viewImg(index)">
							<img :src="item">
						</view>
						
						<view class="null" v-if="infoData.img_list&&infoData.img_list.length == 0">暂无相关数据</view>
					</view>
					<view v-if="infoData.type_info&&infoData.type_info.content_banner&&infoData.type_info.content_banner.length" @click="navto(infoData.type_info.content_url)">
						<image  :src="infoData.type_info.content_banner" alt="" mode="widthFix" style="width: 100%;"></image>
					</view>
				</view>
			</view>
			
			
		</view>
		
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				count: 5,
				value: 0,
				list1: [{
						name: '详情介绍',
					}],
				tabsIndex: 0,
				tabsName:"详情介绍",
				content: '',
				info: {
					id: "",
					page: 1,
					page_num: 6,
					la: "",
					lg: "",
					search: "",
					province: "city",
					city: "",
					c_time: "",
					type: "",
					tag: "",
				},
				infoData: {},
				id: 0,
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					id: 1,
					latitude: 39.909,
					longitude: 116.39742,
					width: '16', // 标记点图标宽度
					height: '20', // 标记点图标高度
					// #ifdef H5
					iconPath: 'https://moxifile.oss-cn-beijing.aliyuncs.com/images/icon/address_1.png',
					width: '18', // 标记点图标宽度
					height: '20', // 标记点图标高度
					// #endif
				}],
				daili:[]
			}
		},
		onLoad() {
			if (this.param.id) {
				this.info.id = this.param.id
				this.locationInit()
			}else{
				this.msg("缺少页面参数！")
			}
		},
		methods: {
			locationInit(){
				let self = this;
				this.moxiGetLocation((res)=>{
					if(res.latitude){
						self.info.la = res.latitude;
						self.info.ln = res.longitude;
						self.get()
					}else{
						self.getLocationShowBox()
					}
				})
			},
			getLocationShowBox(){
				let self = this;
				uni.showModal({
					title: '当前服务需要获取您的位置',
					content: '请将位置信息设置成“使用小程序时允许”',
					success: function (res) {
						if (res.confirm) {
							 self.openSet()
						} else if (res.cancel) {
							let page = getCurrentPages();
							if(page.length>1){
								uni.navigateBack();
							}else{
								uni.redirectTo({
									url: '/pages/index/index'
								});
							}
						}
					}
				});
			},
			openSet(){ 
				let self = this;
				uni.openSetting({
				  success(res) {
				   if(res.authSetting['scope.userLocation']){
					   self.locationInit()
				   }else{
					   self.getLocationShowBox()
				   }
				  }
				});
			},
			openinfo(type){
				if(type=='tel'){
					if(this.infoData.type_info.open_tel&&this.infoData.type_info.open_tel==1){
						this.tel(this.infoData.tel)
					}
				}else{
					if(this.infoData.type_info.open_address&&this.infoData.type_info.open_address==1){
						if(this.infoData.ln&&this.infoData.la){
							uni.openLocation({
								latitude: Number(this.infoData.la),
								longitude: Number(this.infoData.ln),
								name:this.infoData.address,
								success: function () {
									
								}
							});
						}
					}
				}
			},
			toAddress(list){
				if(list.ln&&list.la){
					uni.openLocation({
						latitude: Number(list.la),
						longitude: Number(list.ln),
						name:list.address,
						success: function () {
							
						}
					});
				}
			},
			goUrl(url) {
				window.location.href = url
			},
			viewImg(i) {
				uni.getSystemInfo({
					success: (res) => {
						uni.previewImage({
							urls: this.infoData.img_list,
							current: i,
							loop: true,
							success() {
							},
							fail(err) {
								console.error('图片预览失败', err);
							}
						})
					}
				})
			},
			goProductDetail(id) {
				this.navto('pages/plugin/zx/tailorismDetail?id=' + id)
			},
			// 获取数据
			get() {
				let self = this
				this.moxiPost('/plugin/zx/index/info/get_qiye', this.info, function(data) {
						if(data.data.type_info.post==1){
							self.list1.push({
								name:"产品服务",
							},{
								name:"联系方式"
							})
						}
						if(data.data.type_info.agent==1){
							self.list1.push({
								name:data.data.type_info.agent_name
							})
						}
						
				
					//  {
					// 	name: '产品服务',
					// }, {
					// 	name: '联系方式',
					// }, {
					// 	name: '企业相册',
					// }
					self.daili = data.data.agent_list
					self.infoData = data.data
					self.value = self.infoData.rate
					self.content = self.infoData.desc
					self.covers[0].latitude = self.infoData.la
					self.covers[0].longitude = self.infoData.ln
					
					
				})
			},
			tel(tel){
				uni.makePhoneCall({
					phoneNumber:tel
				});
			},
			goBack() {
				if (getCurrentPages().length > 1) {
					uni.navigateBack({
						delta: 1,
					})
					// this.navto()
				} else {
					this.navto('pages/index/index')
				}
			},
			chooseTab(item) {
				if (this.tabsName == item.name) {
					return
				}
				this.tabsName = item.name
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.type-tag{font-size: 12px;color: #666;background-color: aliceblue;border-radius: 4px;padding: 3px 5px;margin-right: 6px;}
	.map{width: 100%;padding: 6px;box-sizing: border-box; background-color: #fff;}
	.lt{color: #545454;font-size: 13px;}
	.box-list{
		display: flex;flex-direction: row;border: 1px #fefefe solid;margin-top: -1px;
		font-size: 14px;
	}
	.box-title{
		width: 30%;flex-shrink: 0;background-color: #f4f4f4;padding: 10px;color: #ababab;
	}
	.box-con2{
		display: flex;justify-content: center;align-items: center;
		padding: 10px;font-weight: 600;font-family:'黑体';color: #545454;
		background-color: #fafafa;flex: 1;
	}
	.daili_list{
		display: flex;flex-direction: column;padding: 10px;margin-bottom: 10px;
		border-radius: 4px;background-color: #fafafa;
	}
	.box-con{
		 z-index: 10;height: 100vh;
		 border-radius: 15px 15px 0 0;box-shadow: 0 0 5px 1px #d1d1d1;
	}
	.top-img{
		width: 100%;height: 150px;position: fixed;top: 0;left: 0;
	}
	.goBack {
		background-color: #fff;
		padding: 6px;
		border-radius: 50%;
		position: fixed;
		bottom: 60px;
		left: 20px;
		box-shadow: 0px 0px 5px 1px #d7d7d7;
		z-index: 10;
	}

	.tabsMsg {
		// padding: 10px;
		background-color: #f2f2f2;

		.introduce {
			padding: 10px;
			background-color: #fff;
		}

		.null {
			width: 100%;
			padding: 50px 0;
			border-radius: 6px;
			background-color: #fff;
			text-align: center;
		}

		.contact {

			.box {
				margin-bottom: 10px;
				padding: 10px;
				border-radius: 6px;
				background-color: #fff;
				margin-bottom: 20px;

				.website {
					display: flex;
					align-items: baseline;
					margin: 6px 0;
					font-size: 16px;
				}
			}
		}

		.recommends,
		.albums {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 10px;

			.box {
				// width: 48%;
				margin-bottom: 10px;
				padding: 10px;
				border-radius: 6px;
				background-color: #fff;
				margin-bottom: 20px;
				box-shadow: 0 0 6px 2px #dadada;

				img {
					width: 300rpx;
					height: 300rpx;
					object-fit: cover;
				}

				.title {
					width: 300rpx;
					height: 32px;
					margin-top: 10px;
					font-size: 12px;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				// .top {
				// 	// width: 150px;
				// 	// height: 150px;


				// }

				.bottom {
					display: flex;
				}
			}
		}
	}

	// /deep/ .u-navbar__content {
	// 	background: transparent !important
	// }
	::v-deep .u-tabs__wrapper__nav {
		margin-bottom: 4px;
	}

	::v-deep .u-tabs {
		background-color: #fff;
	}

	.nav {
		width: 100%;
		border-radius: 12px 12px 0 0;
		background: #fff;
		// border-bottom: 1px dashed #ddd;

		.info {
			padding: 10px 6px;

			.bottom {
				margin-top: 10px;

				.name {
					font-size: 18px;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}

			.top {
				display: flex;
				align-items: center;
			}

			.left {
				width: 60px;
				height: 60px;
				margin-top: -40px;
				margin-right: 10px;
				border: 4px solid #fbfdf8;
				box-shadow: 0px 0px 5px 1px #d7d7d7;
				border-radius: 50%;
				overflow: hidden;
				background-color: #fff;

				img {
					width: 100%;
					height: 100%;
					// object-fit: cover;
				}
			}

			.right {
				// width: calc(100% - 150px - 10px - 10px);
				font-size: 14px;
				color: #000;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
	}

	.container {
		width: 94%;
		margin: 0 auto;
	}
</style>